var follow = document.getElementById('follow');
chrome.storage.local.get('isFollowing', function (data) {
    if (data['isFollowing']) follow.checked = true;
})
follow.addEventListener('change', function () {
    chrome.storage.local.set({'isFollowing': follow.checked}, function () {})
})

var pic = document.getElementById('pic');
var saveImgUrl = function (e, key) {
    var file = e.target.files[0];
    if (!/^image/.test(file.type)) return alert('请选择图片文件')
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        chrome.storage.local.set({[key]: this.result}, function () {})
    }
}
pic.addEventListener('change', function (e) {
    saveImgUrl(e, 'imgSrc');
})

var am = document.getElementById('animation-mode');
var sm = document.getElementById('switch-mode');
var amMenu = document.getElementsByClassName('pic-am');
var smMenu = document.getElementsByClassName('pic-sm');

// 单选框组，选中其他按钮导致当前按钮失去选中时，不会触发change事件
am.addEventListener('change', function () {
    chrome.storage.local.set({'mode': 'am'}, function () {})
})
sm.addEventListener('change', function () {
    chrome.storage.local.set({'mode': 'sm'}, function () {})
})

var hideEle = function (ele) { ele.classList.add('hide') };
var showEle = function (ele) { ele.classList.remove('hide') };
var switchMenu = function (mode) {
    var ele;
    for (ele of amMenu) {
        mode === 'am' ? showEle(ele) : hideEle(ele);
    }
    for (ele of smMenu) {
        mode === 'sm' ? showEle(ele) : hideEle(ele);
    }
}

var aniTimeGroup = document.getElementById('pic-am-time');
var minusBtn = aniTimeGroup.children[0];
var timeText = aniTimeGroup.children[1];
var plusBtn = aniTimeGroup.children[2];
var aniTime;
minusBtn.addEventListener('click', function () {
    if (aniTime > 5) {
        aniTime--;
        chrome.storage.local.set({aniTime}, function () {})
    }
})
plusBtn.addEventListener('click', function () {
    if (aniTime < 25) {
        aniTime++;
        chrome.storage.local.set({aniTime}, function () {})
    }
})

chrome.storage.local.get(['mode', 'aniTime'], function (data) {
    if (data['mode'] && data['mode'] !== 'am') {
        sm.checked = true;
        switchMenu('sm');
    }

    aniTime = data['aniTime'] || 15;
    timeText.innerHTML = (aniTime / 10).toString().padEnd(3, '.0') + 's';
    minusBtn.disabled = aniTime <= 5;
    plusBtn.disabled = aniTime >= 25;
})

chrome.storage.onChanged.addListener(function (e) {
    if (e['mode']) {
        var mode = e['mode'].newValue;
        if (mode === 'am') am.checked = true;
        else sm.checked = true;
        switchMenu(mode);
    }
    else if (e['aniTime']) {
        aniTime = e['aniTime'].newValue;
        timeText.innerHTML = (aniTime / 10).toString().padEnd(3, '.0') + 's';
        minusBtn.disabled = aniTime <= 5;
        plusBtn.disabled = aniTime >= 25;
    }
})

var clickAnimation = document.getElementById('pic-am--click');
var scrollAnimation = document.getElementById('pic-am-hold');
var pics = [clickAnimation, scrollAnimation];
var i;
for (i=0; i<4; i++) {
    pics.push(document.getElementById('pic-sm-'+i));
}

var keys = ['clickPic', 'scrollPic', 'backPic0', 'backPic1','backPic2','backPic3'];
for (i=0; i<6; i++) {
    (function (index) {
        pics[i].addEventListener('change', function (e) {
            saveImgUrl(e, keys[index]);
        })
    })(i)
}
